<template>
  <div id="login-page" class="view-account">
    <div class="view-account-imgbox">
      <img :src="loginBackground" alt="" />
    </div>
    <div class="view-account-box">
      <!-- 左侧背景图 -->
      <!-- <div class="view-account-background">
        <div class="view-account-header">
          <img src="@/assets/images/logo-white.png" />
        </div>
      </div> -->
      <!-- <div class="view-account-header">
        <img src="@/assets/images/logo-white.png" />
      </div> -->

      <!-- 全屏切换 -->
      <!-- <div class="view-fullScreen">
        <n-tooltip placement="bottom">
          <template #trigger>
            <i class="iconfont icon-pmsquanping" @click="toggleFullScreenFn"></i>
          </template>
          <span>{{ $t('navbar.fullScreen') }}</span>
        </n-tooltip>
      </div> -->

      <!-- 右侧 -->
      <div class="view-account-smbox">
        <!-- 登录框 -->
        <div class="view-account-container">
          <div class="login-header">
            <img :src="logoImg" />
          </div>

          <n-dropdown
            width="trigger"
            style="margin-top: 0; text-align: center"
            trigger="click"
            :options="langOptions"
            @select="handleLangSelect"
          >
            <span class="lang-box">
              <n-icon :component="Language" />

              <span>{{
                settingStore.language === 'zh'
                  ? '简体中文'
                  : settingStore.language === 'ru'
                  ? 'Русский язык'
                  : 'English'
              }}</span>

              <n-icon :component="CaretDown" />
            </span>
          </n-dropdown>

          <div class="ui-form-body-left">
            <img :src="logoLeftImg" alt="" class="ui-logo-left-imgs" />
          </div>
          <div class="ui-form-body-right" style="margin-top: -50px">
            <div class="view-account-top">
              <h3 class="title">{{ t('route.login') }}</h3>
              <div class="view-account-top-title">{{ t('login.title') }}</div>
            </div>
            <div class="view-account-form">
              <n-form
                ref="formRef"
                label-placement="left"
                size="large"
                :model="form"
                :rules="rules"
                class="login-input"
              >
                <!-- 用户名 -->
                <n-form-item path="username">
                  <DFModalKeyboard
                    :value="form.userName"
                    keyboardClass="login-username"
                    :placeholder="$t('login.dataTip')"
                    :input-props="{ autocomplete: 'new-password' }"
                    :maxlength="50"
                    :onUpdateValue="updateUsernameFn"
                    @keyup.enter="handleSubmit"
                    @enterFn="handleSubmit"
                  >
                    <template #prefix>
                      <DFSvgIcon class="login-svg" :name="'user'" />
                    </template>
                  </DFModalKeyboard>
                </n-form-item>

                <!-- 密码 -->
                <n-form-item path="password">
                  <DFModalKeyboard
                    :value="form.password"
                    keyboardClass="login-password"
                    :type="'password'"
                    :showPasswordOn="'click'"
                    :placeholder="$t('login.codeTip')"
                    :input-props="{ autocomplete: 'new-password' }"
                    :maxlength="50"
                    @keyup.enter="handleSubmit"
                    @enterFn="handleSubmit"
                    :onUpdateValue="updatePasswordFn"
                  >
                    <template #prefix>
                      <DFSvgIcon class="login-svg" :name="'password'" />
                    </template>
                    <template #password-visible-icon>
                      <DFSvgIcon class="eye-svg" :name="'eyeOpen'" />
                    </template>
                    <template #password-invisible-icon>
                      <DFSvgIcon class="eye-svg" :name="'eyeClose'" />
                    </template>
                  </DFModalKeyboard>
                </n-form-item>

                <!-- 提交按钮 -->
                <n-form-item>
                  <n-button
                    @click="handleSubmit"
                    size="large"
                    :loading="loading"
                    block
                    class="login-button"
                  >
                    {{ $t('route.login') }}
                  </n-button>
                </n-form-item>
                <!-- <n-form-item v-if="isShowBrowserLogin">
                  <n-button
                    type="primary"
                    @click="e => handleSubmit(e, true)"
                    size="large"
                    class="login-button"
                    :loading="loading"
                    block
                  >
                    {{ $t('common.button.browserLogin') }}
                  </n-button>
                </n-form-item> -->

                <!-- 记住密码 -->
                <n-form-item class="default-color">
                  <div class="flex justify-between">
                    <div class="flex-initial">
                      <n-checkbox class="remember-text" v-model:checked="rememberMe">
                        {{ getPageLangValueFn('forgetPassword') }}
                      </n-checkbox>
                    </div>
                    <div class="flex-initial">
                      <n-switch
                        :round="false"
                        :value="userStore.virtualKeyboard"
                        @update:value="changeVirtualKeyboardFn"
                      />

                      {{ $t('common.tipMsg.virtualKeyboard') }}
                    </div>
                  </div>
                </n-form-item>
              </n-form>
            </div>

            <!-- <div v-if="styleType === 4" class="flex-center version-view">
              {{`${$t('login.versionPro')}V3.0.0`}}
            </div> -->
          </div>
        </div>
      </div>
    </div>

    <div class="el-login-footer">
      <span>{{ $t('common.tipMsg.copyright') }}</span>
    </div>

    <!-- <OptionsModal ref="optionsModalRef"/> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import { useMessage } from 'naive-ui';
  import { ResultEnum } from '@/enums/httpEnum';
  import { Language, CaretDown } from '@vicons/ionicons5';
  import logoLeftImg from '@/assets/images/ui-logo-left.png';
  // import {
  //   PersonOutline,
  //   LockClosedOutline,
  //   // LogoGithub, LogoFacebook
  // } from '@vicons/ionicons5';
  import {
    // encrypt,
    decrypt,
  } from '@/utils/jsencrypt';
  import { storage } from '@/utils/Storage';
  import { useMixins } from '@/hooks/useMixins';
  import lang from './lang';
  import { t, locale } from '@/i18n';
  import { useProjectSettingStore } from '@render/store/modules/projectSetting';
  import loginBackground from '@/assets/images/login-background.jpg';

  import logoImg from '@/assets/images/logo2.png';

  import DFModalKeyboard from '@/components/DFModalKeyboard/index.vue';
  // import OptionsModal from './components/OptionsModal.vue'

  // import allRouterMenu from '@/utils/getRouerArr';

  // console.log(allRouterMenu);

  interface FormState {
    userName: string;
    password: string;
  }

  const settingStore = useProjectSettingStore();

  const { isElectron } = settingStore;

  const optionsModalRef: any = ref(null);

  const keydownFn = (e: any) => {
    const keyNum = window.event ? e.keyCode : e.which;

    if (keyNum === 220 && e.shiftKey) {
      // alert('您按下了Shift和\');
      optionsModalRef.value.openModalFn && optionsModalRef.value.openModalFn();
    }
  };

  onMounted(() => {
    if (isElectron) {
      nextTick(() => {
        if (optionsModalRef && optionsModalRef.value) {
          document.addEventListener('keydown', keydownFn);
        }
      });
    }
  });

  onBeforeUnmount(() => {
    if (isElectron) {
      document.removeEventListener('keydown', keydownFn);
    }
  });

  const { loadLangFn, getPageLangValueFn } = useMixins();

  loadLangFn(lang);

  const formRef: any = ref(null);

  const message = useMessage();

  const loading = ref(false);

  const rememberMe = ref(true);

  const form = reactive({
    userName: process.env.NODE_ENV === 'development' ? 'admin' : storage.get('username') || '',
    password:
      process.env.NODE_ENV === 'development'
        ? 'admin123'
        : storage.get('password') || ''
        ? decrypt(storage.get('password') || '')
        : '',
  });

  const rules = {
    userName: { required: true, message: t('common.form.plInput'), trigger: 'blur' },
    password: { required: true, message: t('common.form.plInput'), trigger: 'blur' },
  };

  const userStore = useUserStore();

  userStore.clearAll();

  const router = useRouter();

  const route = useRoute();

  const handleSubmit = (e) => {
    e.preventDefault();

    formRef.value.validate(async (errors) => {
      if (!errors) {
        const { userName, password } = form;

        const data: FormState = {
          userName,
          password,
        };

        // message.loading('登录中...');

        loading.value = true;

        try {
          const { code, message: msg } = await userStore.login(data);

          message.destroyAll();

          if (code === ResultEnum.SUCCESS) {
            const toPath = decodeURIComponent((route.query?.redirect || '/') as string);

            msg && message.success(msg);

            if (rememberMe.value) {
              storage.set('username', userName);

              storage.set('password', password);
            } else {
              storage.remove('username');

              storage.remove('password');
            }

            router.replace(toPath || '/');
          } else {
            msg && message.error(msg);
          }
        } finally {
          loading.value = false;
        }
      } else {
        message.error(t('common.tipMsg.formConfirmMsg'));
      }
    });
  };

  //切换语言
  const isZh = computed(() => locale.value === 'zh');
  const isEn = computed(() => locale.value === 'en');
  // const isRu = computed(() => locale.value === 'ru');
  const langOptions = computed(() => [
    {
      label: '简体中文',
      key: 'zh',
      disabled: isZh.value,
    },
    {
      label: 'English',
      key: 'en',
      disabled: isEn.value,
    },
    // {
    //   label: 'Русский язык',
    //   key: 'ru',
    //   disabled: isRu.value,
    // }
  ]);

  //语言选择
  const handleLangSelect = (lang) => {
    locale.value = lang;

    settingStore.language = lang;

    storage.set('language', lang);

    document.title = t('route.login');

    // ipcRenderer.send('change-language');

    // router.push({
    //   path: '/redirect' + unref(route).fullPath,
    // });
  };

  const changeVirtualKeyboardFn = (val) => {
    userStore.changeVirtualKeyboard(val);
  };

  const updatePasswordFn = (val) => {
    console.log(val);
    form.password = val;
  };

  const updateUsernameFn = (val) => {
    form.userName = val;
  };
</script>

<style lang="less">
  #login-page {
    .view-account-header {
      width: 210px;
      img {
        display: block;
        width: 100%;
      }
    }

    .view-account-container {
      max-width: 1040px;
      width: 96%;
      border-radius: 8px !important;
      // overflow: hidden;
      height: auto;
      align-items: stretch;

      .lang-box {
        color: #606266 !important;
        right: 20px;
        top: 24px;
        z-index: 1;
        font-size: 14px;
      }

      .ui-form-body-left {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #92c1ff;
        padding-bottom: 0;
        flex: 1;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        .ui-logo-left-imgs {
          display: block;
          padding: 6.5vh 0.5vw 3vh 2.4vw;
          max-width: 100%;
          height: auto;
          overflow-clip-margin: content-box;
          overflow: clip;
        }
      }

      .ui-form-body-right {
        flex: 1;
        margin-top: 0 !important;
        background: #fff;
        position: relative;
        padding-bottom: 10vh;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;

        .login-input {
          width: 100%;
        }

        .view-account-top {
          padding: 0 3.1vw;
          .title {
            font-size: 40px;
            margin: 10vh auto 16px auto;
            line-height: 1;
            text-align: left;
            color: #222;
            font-weight: 500;
          }
          .view-account-top-title {
            font-size: 20px;
            line-height: 1;
            font-weight: 400;
            text-align: left;
            color: #999999;
            margin-bottom: 3.7vh;
          }
        }

        .view-account-form {
          padding: 0 3.1vw;
          justify-content: flex-start;
          .login-input .n-form-item,
          .n-input,
          .n-input .n-input__input-el {
            height: 48px !important;
          }

          .n-input {
            background: #f5f5f5 !important;
            border-radius: 48px !important;
            --n-box-shadow-focus: 0 !important;
          }

          .n-input:not(.n-input--disabled).n-input--focus .n-input__state-border {
            border: 1px solid @primaryColor!important;
          }

          .login-input .n-form-item {
            margin-bottom: 28px;
            &.default-color {
              margin-bottom: 0;
              height: auto !important;
              .n-form-item-blank {
                min-height: auto;
              }
            }
          }

          .n-input .n-input__input-el {
            color: #606266 !important;
          }

          .login-button {
            height: 48px;
            background: @primaryColor;
            border-radius: 24px;
            font-size: 20px;
          }
        }

        .default-color {
          margin-top: 0;
          margin-bottom: 0;
          width: 100%;
          .flex,
          .n-checkbox .n-checkbox__label {
            color: #666 !important;
            font-weight: 400;
            font-size: 14px;
          }
        }

        .n-checkbox-box {
          border-radius: 50%;
        }

        .n-checkbox-box__border {
          --n-border-checked: 1px solid @primaryColor !important;
          --n-border-focus: 1px solid @primaryColor !important;
          --n-color-checked: @primaryColor !important;
        }

        .n-checkbox.n-checkbox--checked .n-checkbox-box {
          background-color: @primaryColor;
          --n-border-checked: 1px solid @primaryColor !important;
          --n-border-focus: 1px solid @primaryColor !important;
          --n-color-checked: @primaryColor !important;
        }

        .n-switch.n-switch--active .n-switch__rail {
          background-color: @primaryColor;
        }

        .n-switch .n-switch__rail {
          background-color: var(--n-rail-color);
        }

        .version-view {
          position: absolute;
          bottom: 16px;
          left: 0;
          right: 0;
          color: #999999;
          font-size: 14px;
          text-align: center;
        }
      }
    }

    .login-header {
      width: 280px;
      position: absolute;
      top: -65px;
      left: 0;
    }

    .el-login-footer {
      position: absolute;
      bottom: 30px;
      width: 100%;
      text-align: center;
      font-size: 16px;
      color: #abc0ff;
    }
  }

  input[type='password']::-ms-reveal {
    display: none;
  }
  input[type='password']::-ms-clear {
    display: none;
  }
  input[type='password']::-o-clear {
    display: none;
  }

  .view-fullScreen {
    position: fixed;
    top: 30px;
    right: 30px;
  }
  .view-fullScreen .iconfont {
    font-size: 32px;
    color: #fff;
    cursor: pointer;
  }
</style>

<style lang="less" scoped>
  .view-account {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    position: relative;
    width: 100%;

    :deep(.DFKeyboardInput),
    :deep(.DFModalKeyboard) {
      width: 100%;
      display: grid;
    }
    :deep(.view-account-smbox .lang-box:hover) {
      background-color: rgb(255 255 255 / 20%) !important;
      transition: 0.3s all;
    }
    .view-account-imgbox {
      position: relative;
    }
    .language-svg {
      width: 16px;
      height: 16px;
      font-size: 16px;
      color: #31373d;
    }
    .view-account-form {
      display: flex;
      justify-content: center;
    }
    .login-svg {
      width: 24px;
      height: 24px;
      font-size: 24px;
      color: #a7aebc;
    }

    .eye-svg {
      width: 16px;
      height: 16px;
      font-size: 16px;
      color: #c0c4cc;
      transition: 0.3s color;

      &:hover {
        color: #393f58;
        transition: 0.3s color;
      }
    }

    &-box {
      display: flex;
      // background: #ffffff;
    }

    // 左侧背景
    &-background {
      width: 900px;
      height: 100vh;
      overflow: hidden;
      opacity: 1;
      position: relative;
    }
    &-header {
      position: absolute;
      z-index: 2;
      left: 90px;
      top: 8px;
    }
    &-imgbox {
      width: 100%;
      height: 100vh;
      position: relative;
      top: 0;
      left: 0;
      bottom: 0;
      // background-color: #785742;
      // opacity:0.3;
      img {
        width: 100vw;
        height: 100vh;
        display: block;
        object-fit: fill;
      }
    }

    // 右侧
    &-smbox {
      // position: absolute;
      // height: 100vh;
      // width: 100%;
      // left: 50%;
      // top: 50%;
      // transform: translate(-50%, -50%);

      //国际化
      .lang-box {
        color: #ffffff;
        position: absolute;
        display: flex;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        width: 124px;
        height: 28px;
        border-radius: 4px 4px 4px 4px;
        top: 39px;
        right: 150px;
        cursor: pointer;
        &:active,
        &:hover {
          background-color: #e3e3e3;
          transition: 0.3s all;
        }
      }
    }

    //登录
    &-container {
      // padding: 18px 24px 24px;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      // text-align: center;
      // top: 20.75%;
      // right: 30%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 550px;
      height: 621px;
      // background: #ffffff;
      // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      // border: 1px solid #e0e0e0;
    }

    &-top {
      // height: 116px;
      text-align: center;
      padding: 40px 0;

      &-title {
        font-size: 44px;
        font-weight: 500;
        color: #ffffff;
        white-space: nowrap;
        font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi;
        line-height: 60px;
      }
      &-little {
        color: #ffffff;
        font-size: 16px;
        opacity: 0.7;
        line-height: 14px;
      }

      &-desc {
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }
    }

    .remember-text {
      font-size: 14px;
      ::v-deep(.n-checkbox-box__border) {
        --n-border-checked: 1px solid #ff6a3f !important;
        --n-border-focus: 1px solid #ff6a3f !important;
        --n-color-checked: #ff6a3f !important;
        --n-box-shadow-focus: none !important;
      }
    }

    &-other {
      width: 100%;
    }

    .default-color {
      color: #606266;
      width: 390px;
      margin-top: -14px;

      .flex {
        display: flex;
        width: 100%;
        justify-content: space-between;
        color: #fff;

        :deep(.n-switch .n-switch__rail) {
          background-color: rgba(255, 255, 255, 0.3);
        }
        :deep(.n-switch.n-switch--active .n-switch__rail) {
          background-color: #ff6a3f;
        }
      }

      .ant-checkbox-wrapper {
        color: #606266;
      }
      ::v-deep(.n-checkbox--checked .n-checkbox__label) {
        color: #606266;
      }

      ::v-deep(.n-checkbox.n-checkbox--checked .n-checkbox-box) {
        background-color: #ff6a3f;
        --n-border-checked: 1px solid #ff6a3f !important;
        --n-border-focus: 1px solid #ff6a3f !important;
        --n-color-checked: #ff6a3f !important;
      }
    }

    .login-input {
      box-sizing: border-box;
      width: 390px;
      // height: 48px;
      // background: #ffffff;
      border-radius: 4px 4px 4px 4px;

      .n-form-item {
        height: 48px;
        margin-bottom: 20px;
      }
      ::v-deep(.n-input__prefix) {
        margin-right: 13px;
      }
      ::v-deep(.n-input, .n-input--resizable, .n-input--stateful) {
        --n-border-hover: 1px solid #ff6a3f !important;
        --n-border-focus: 1px solid #ff6a3f !important;
        --n-loading-color: #ff6a3f !important;
        --n-caret-color: #151515 !important;
      }
      ::v-deep(.n-input .n-input__input-el) {
        height: 48px;
      }

      ::v-deep(.n-form-item .n-form-item-feedback-wrapper) {
        min-height: 0px !important;
      }

      ::v-deep(.n-form-item .n-form-item--large-size .n-form-item--left-labelled .default-color) {
        width: 390px;
        height: 24px;
      }
    }

    .login-button {
      border: none;
      color: #fff;
      transition: 0.3s all;
      box-shadow: none;
      height: 60px;
      line-height: 24px;
      margin-bottom: 10px;
      font-size: 22px;
      background: linear-gradient(90deg, #ff6a3f 0%, #ff854d 99%);
      :deep(.n-button__border),
      :deep(.n-button__state-border) {
        display: none;
      }
      &:active {
        background: linear-gradient(90deg, #dc5027 0%, #e57947 100%);
        box-shadow: none;
        transition: 0.3s all;
      }
      &:hover {
        background: linear-gradient(90deg, #ffa074 0%, #ff7e59 100%);
        // box-shadow: 0px 4px 10px 0px #ffcdbf;
        color: #fff;
        transition: 0.3s all;
      }

      ::v-deep(
          .n-button.login-button,
          .n-button--default-type.login-button,
          .n-button--large-type.login-button,
          .n-button--block.login-button
        ) {
        --n-border-pressed: none !important;
      }
    }
    .eye-icon:hover {
      color: #393f58;
    }
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  @media (min-width: 768px) {
    .page-account-container {
      padding: 32px 0 24px 0;
    }
  }
  :deep(.n-input) {
    background: rgba(255, 255, 255, 0.3) !important;
    height: 60px !important;
  }
  :deep(.n-input .n-input__input-el, .n-input .n-input__textarea-el) {
    color: #ffffff !important;
    opacity: 0.8;
    height: 60px !important;
    line-height: 60px !important;
  }
  .view-account .login-input {
    :deep(.n-input) {
      --n-border-hover: none !important;
      --n-border-focus: none !important;
      --n-loading-color: none !important;
      --n-caret-color: none !important;
      --n-border: none !important;
      --n-border-radius: 4px !important;
    }
  }
  .view-account .login-input .n-form-item {
    height: 60px !important;
    margin-bottom: 20px;
  }
  :deep(.n-checkbox--checked .n-checkbox__label) {
    color: #ffffff !important;
  }
  :deep(.n-checkbox .n-checkbox__label) {
    color: #ffffff !important;
  }
</style>
